﻿@page "/products/{ProductId:guid}"
@attribute [Authorize]

@using ClassifiedAds.Blazor.Modules.Products.Components

<div class="card">
	<div class="card-header">
		Product Details: @Product.Name
	</div>

	<div class="card-body">
		<div class="row">
			<div class="col-md-8">
				<div class="row">
					<div class="col-md-4">Name:</div>
					<div class="col-md-8">@Product.Name</div>
				</div>
				<div class="row">
					<div class="col-md-4">Code:</div>
					<div class="col-md-8">@Product.Code?.ToUpper()</div>
				</div>
				<div class="row">
					<div class="col-md-4">Description:</div>
					<div class="col-md-8">@Product.Description</div>
				</div>
				<div class="row">
					<div class="col-md-4">Price:</div>
					<div class="col-md-8">
					</div>
				</div>
				<div class="row">
					<div class="col-md-4">5 Star Rating:</div>
					<div class="col-md-8">
					</div>
				</div>
			</div>

			<div class="col-md-4">
				<img class="center-block img-responsive"
					 style="width:200px; margin:2px;"
					 src="/images/logo.png"
					 title="@Product.Name" />
			</div>
		</div>
	</div>

	<div class="card-footer">
		<NavLink class="btn btn-outline-secondary" href="products">
			<i class="fa fa-chevron-left"></i> Back
		</NavLink>
		&nbsp;
		<button @onclick="@(() => NavManager.NavigateTo($"/products/edit/{ProductId}"))" class="btn btn-primary" title="Edit">Edit</button>
		&nbsp;
		<button @onclick="(() => ViewAuditLogs())" class="btn btn-secondary" title="View Audit Logs">View Audit Logs</button>
	</div>
</div>

<AuditLogsDialog @ref="AuditLogsDialog"></AuditLogsDialog>

@if (Product.ProductEmbedding != null)
{
	<div class="card">
		<div class="card-header">
			Product Embedding
		</div>

		<div class="card-body">
			<div class="row">
				<div class="col-md-8">
					<div class="row">
						<div class="col-md-4">Text:</div>
						<div class="col-md-8">@Product.ProductEmbedding?.Text</div>
					</div>
					<div class="row">
						<div class="col-md-4">Embedding:</div>
						<div class="col-md-8"> <a href="javascript:void(0)" @onclick="(() => DownloadProductEmbedding())">Download</a></div>
					</div>
					<div class="row">
						<div class="col-md-4">Token Details:</div>
						<div class="col-md-8">@Product.ProductEmbedding?.TokenDetails</div>
					</div>
					<div class="row">
						<div class="col-md-4">Created Date:</div>
						<div class="col-md-8">@Product.ProductEmbedding?.CreatedDateTime</div>
					</div>
					<div class="row">
						<div class="col-md-4">Updated Date:</div>
						<div class="col-md-8">@Product.ProductEmbedding?.UpdatedDateTime</div>
					</div>
				</div>
			</div>
		</div>
	</div>
}

<div class="card">
	<div class="card-header">
		Similar Products
	</div>
	<div class="card-body">
		<div class="table-responsive">
			@if (Product == null)
			{
				<p><em>Loading...</em></p>
			}
			else if(Product.SimilarProducts == null || !Product.SimilarProducts.Any())
			{
				<p><em>No similar products found.</em></p>
			}
			else
			{
				<table class="table">
					<thead>
						<tr>
							<th>Name</th>
							<th>Code</th>
							<th>Description</th>
							<th>Similarity Score</th>
						</tr>
					</thead>
					<tbody>
						@foreach (var product in Product?.SimilarProducts)
						{
							<tr @key="product.Id">
								<td><a href="@($"/products/{product.Id}")">@product.Name</a></td>
								<td>@product.Code</td>
								<td>@product.Description</td>
								<td>@product.SimilarityScore</td>
							</tr>
						}
					</tbody>
				</table>
			}
		</div>
	</div>
</div>